<template>
    <div class="mobile-footer" :style="{ height: height + 'px' }">
        <div class="foot-menu" v-for="k in mobileLayoutState.footerMenu">
            <div class="icon-block" @click="openFooterMenu(k)">
                <i v-if="isSvg(footerIsActive(k) ? k.ActivedIcon : k.Icon)"
                    v-html="footerIsActive(k) ? k.ActivedIcon : k.Icon" class="footer-svg-icon"></i>
                <i v-else :class="footerIsActive(k) ? k.ActivedIcon : k.Icon" style="font-size: 24px"
                    :style="{ color: footerIsActive(k) ? 'var(--theme-color)' : '' }"></i>
            </div>
            <span class="menu-text" :style="{ color: footerIsActive(k) ? 'var(--theme-color)' : '' }">{{ k.DisplayName
                }}</span>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { inject } from 'vue'
const mobileLayoutState = inject('mobileLayoutState')
const props = defineProps({
    height: {
        type: Number,
        default: 0
    }
})
const isSvg = (icon) => {
    return icon.trim().startsWith('<svg');
}

const footerIsActive = (item) => {
    if (mobileLayoutState.currentComponent == 'mweb_render') {
        return item.NavigateUrl == mobileLayoutState.currentNavigateUrl
    }
    return item.Component == mobileLayoutState.currentComponent
}
const openFooterMenu = (k) => {
    mobileLayoutState.currentNavigateUrl = k.NavigateUrl
    mobileLayoutState.currentComponent = k.Component
}

const initFootMenuRatio = () => {
    let ratio = '20%'
    if (mobileLayoutState.footerMenu.length > 1) {
        ratio = `${100 / mobileLayoutState.footerMenu.length}%`
    }
    if (ratio > '25%') ratio = '20%'
    document.documentElement.style.setProperty('--foot-menu-ratio', ratio)
}
onMounted(() => {
    initFootMenuRatio()
})
// 移动端页脚组件
</script>

<style scoped lang="scss">
.mobile-footer {
    width: 100%;
    background-color: #f0f0f0;
    box-shadow: 0px -3px 6px 0px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    padding: 12px 0 0px 0px;
    justify-content: space-around;
    flex-wrap: wrap;
}
.foot-menu {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: 38px;
    flex-basis: var(--foot-menu-ratio, 20%);
    margin-bottom: 24px;

    .menu-text {
        color: rgba(0, 0, 0, 0.9);
        overflow: hidden;
        text-align: center;
        white-space: nowrap;
        padding: 0 6px;
        line-height: 13px;
        text-overflow: ellipsis;

        font-size: 12px;
    }

    .icon-block i {
        color: #000;
    }
    .icon-block .footer-svg-icon{
        color: var(--theme-color);
    }
}

.foot-menu i {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 7px;
}
.mobile-footer__title {
    font-size: 14px;
    color: #666;
}
</style>